<template>
  <div class="company-settings">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">公司设置</h1>
        <p class="page-desc">管理企业基本信息和配置</p>
      </div>
    </div>

    <!-- 设置内容 -->
    <div class="settings-container">
      <el-row :gutter="20">
        <!-- 左侧菜单 -->
        <el-col :xs="24" :md="6">
          <el-card class="menu-card">
            <el-menu :default-active="activeMenu" class="settings-menu" @select="handleMenuSelect">
              <el-menu-item index="basic">
                <el-icon>
                  <OfficeBuilding />
                </el-icon>
                <span>基本信息</span>
              </el-menu-item>
              <el-menu-item index="contact">
                <el-icon>
                  <Phone />
                </el-icon>
                <span>联系方式</span>
              </el-menu-item>
              <el-menu-item index="branding">
                <el-icon>
                  <Picture />
                </el-icon>
                <span>品牌形象</span>
              </el-menu-item>
              <el-menu-item index="social">
                <el-icon>
                  <Link />
                </el-icon>
                <span>社交媒体</span>
              </el-menu-item>
              <el-menu-item index="recruitment">
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span>招聘配置</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </el-col>

        <!-- 右侧内容 -->
        <el-col :xs="24" :md="18">
          <!-- 基本信息 -->
          <el-card v-show="activeMenu === 'basic'" class="content-card">
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
                <el-button type="primary" @click="handleSaveBasic" :loading="saveLoading">
                  保存
                </el-button>
              </div>
            </template>

            <el-form ref="basicFormRef" :model="basicForm" :rules="basicRules" label-width="120px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="企业名称" prop="name">
                    <el-input v-model="basicForm.name" placeholder="请输入企业名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业简称" prop="shortName">
                    <el-input v-model="basicForm.shortName" placeholder="请输入企业简称" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="所属行业" prop="industry">
                    <el-select v-model="basicForm.industry" placeholder="请选择行业" style="width: 100%">
                      <el-option label="互联网" value="互联网" />
                      <el-option label="金融" value="金融" />
                      <el-option label="教育" value="教育" />
                      <el-option label="医疗" value="医疗" />
                      <el-option label="制造业" value="制造业" />
                      <el-option label="房地产" value="房地产" />
                      <el-option label="其他" value="其他" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业规模" prop="size">
                    <el-select v-model="basicForm.size" placeholder="请选择企业规模" style="width: 100%">
                      <el-option label="1-50人" value="1-50人" />
                      <el-option label="51-200人" value="51-200人" />
                      <el-option label="201-500人" value="201-500人" />
                      <el-option label="500+人" value="500+人" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="企业地址" prop="address">
                <el-input v-model="basicForm.address" placeholder="请输入企业地址" />
              </el-form-item>

              <el-form-item label="企业简介" prop="description">
                <el-input v-model="basicForm.description" type="textarea" :rows="4" placeholder="请输入企业简介"
                  maxlength="500" show-word-limit />
              </el-form-item>

              <el-form-item label="成立时间" prop="foundedDate">
                <el-date-picker v-model="basicForm.foundedDate" type="date" placeholder="请选择成立时间" style="width: 100%" />
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 联系方式 -->
          <el-card v-show="activeMenu === 'contact'" class="content-card">
            <template #header>
              <div class="card-header">
                <span>联系方式</span>
                <el-button type="primary" @click="handleSaveContact" :loading="saveLoading">
                  保存
                </el-button>
              </div>
            </template>

            <el-form ref="contactFormRef" :model="contactForm" :rules="contactRules" label-width="120px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="联系人姓名" prop="contactName">
                    <el-input v-model="contactForm.contactName" placeholder="请输入联系人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系人职位" prop="contactTitle">
                    <el-input v-model="contactForm.contactTitle" placeholder="请输入联系人职位" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="联系邮箱" prop="contactEmail">
                    <el-input v-model="contactForm.contactEmail" placeholder="请输入联系邮箱" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="contactPhone">
                    <el-input v-model="contactForm.contactPhone" placeholder="请输入联系电话" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="企业官网" prop="website">
                <el-input v-model="contactForm.website" placeholder="请输入企业官网" />
              </el-form-item>

              <el-form-item label="客服电话" prop="servicePhone">
                <el-input v-model="contactForm.servicePhone" placeholder="请输入客服电话" />
              </el-form-item>

              <el-form-item label="客服邮箱" prop="serviceEmail">
                <el-input v-model="contactForm.serviceEmail" placeholder="请输入客服邮箱" />
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 品牌形象 -->
          <el-card v-show="activeMenu === 'branding'" class="content-card">
            <template #header>
              <div class="card-header">
                <span>品牌形象</span>
                <el-button type="primary" @click="handleSaveBranding" :loading="saveLoading">
                  保存
                </el-button>
              </div>
            </template>

            <el-form ref="brandingFormRef" :model="brandingForm" label-width="120px">
              <el-form-item label="企业Logo">
                <div class="upload-section">
                  <el-upload class="logo-uploader" action="#" :show-file-list="false" :before-upload="beforeLogoUpload"
                    :http-request="handleLogoUpload">
                    <img v-if="brandingForm.logoUrl" :src="brandingForm.logoUrl" class="logo" />
                    <el-icon v-else class="logo-uploader-icon">
                      <Plus />
                    </el-icon>
                  </el-upload>
                  <div class="upload-tips">
                    <p>建议尺寸：200x200像素</p>
                    <p>支持格式：JPG、PNG</p>
                    <p>文件大小：不超过2MB</p>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="企业封面">
                <div class="upload-section">
                  <el-upload class="cover-uploader" action="#" :show-file-list="false"
                    :before-upload="beforeCoverUpload" :http-request="handleCoverUpload">
                    <img v-if="brandingForm.coverUrl" :src="brandingForm.coverUrl" class="cover" />
                    <div v-else class="cover-placeholder">
                      <el-icon>
                        <Plus />
                      </el-icon>
                      <span>上传企业封面</span>
                    </div>
                  </el-upload>
                  <div class="upload-tips">
                    <p>建议尺寸：1200x400像素</p>
                    <p>支持格式：JPG、PNG</p>
                    <p>文件大小：不超过5MB</p>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="品牌色彩">
                <div class="color-section">
                  <div class="color-item">
                    <label>主色调</label>
                    <el-color-picker v-model="brandingForm.primaryColor" />
                  </div>
                  <div class="color-item">
                    <label>辅助色</label>
                    <el-color-picker v-model="brandingForm.secondaryColor" />
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="企业标语">
                <el-input v-model="brandingForm.slogan" placeholder="请输入企业标语" maxlength="100" show-word-limit />
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 社交媒体 -->
          <el-card v-show="activeMenu === 'social'" class="content-card">
            <template #header>
              <div class="card-header">
                <span>社交媒体</span>
                <el-button type="primary" @click="handleSaveSocial" :loading="saveLoading">
                  保存
                </el-button>
              </div>
            </template>

            <el-form ref="socialFormRef" :model="socialForm" label-width="120px">
              <el-form-item label="微信公众号">
                <el-input v-model="socialForm.wechat" placeholder="请输入微信公众号" />
              </el-form-item>

              <el-form-item label="微博">
                <el-input v-model="socialForm.weibo" placeholder="请输入微博地址" />
              </el-form-item>

              <el-form-item label="LinkedIn">
                <el-input v-model="socialForm.linkedin" placeholder="请输入LinkedIn地址" />
              </el-form-item>

              <el-form-item label="GitHub">
                <el-input v-model="socialForm.github" placeholder="请输入GitHub地址" />
              </el-form-item>

              <el-form-item label="其他链接">
                <div class="social-links">
                  <div v-for="(link, index) in socialForm.otherLinks" :key="index" class="link-item">
                    <el-input v-model="link.name" placeholder="链接名称" style="width: 150px; margin-right: 10px" />
                    <el-input v-model="link.url" placeholder="链接地址" style="flex: 1; margin-right: 10px" />
                    <el-button type="danger" @click="removeSocialLink(index)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </el-button>
                  </div>
                  <el-button type="primary" @click="addSocialLink">
                    <el-icon>
                      <Plus />
                    </el-icon>
                    添加链接
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 招聘配置 -->
          <el-card v-show="activeMenu === 'recruitment'" class="content-card">
            <template #header>
              <div class="card-header">
                <span>招聘配置</span>
                <el-button type="primary" @click="handleSaveRecruitment" :loading="saveLoading">
                  保存
                </el-button>
              </div>
            </template>

            <el-form ref="recruitmentFormRef" :model="recruitmentForm" label-width="120px">
              <el-form-item label="自动回复">
                <el-switch v-model="recruitmentForm.autoReply" />
                <span class="form-tip">开启后，收到简历投递时自动发送确认邮件</span>
              </el-form-item>

              <el-form-item label="回复模板" v-if="recruitmentForm.autoReply">
                <el-input v-model="recruitmentForm.replyTemplate" type="textarea" :rows="4" placeholder="请输入自动回复邮件模板" />
              </el-form-item>

              <el-form-item label="简历筛选">
                <el-switch v-model="recruitmentForm.resumeFilter" />
                <span class="form-tip">开启后，系统将自动筛选不符合要求的简历</span>
              </el-form-item>

              <el-form-item label="面试提醒">
                <el-switch v-model="recruitmentForm.interviewReminder" />
                <span class="form-tip">开启后，面试前自动发送提醒邮件</span>
              </el-form-item>

              <el-form-item label="提醒时间" v-if="recruitmentForm.interviewReminder">
                <el-select v-model="recruitmentForm.reminderTime" placeholder="请选择提醒时间">
                  <el-option label="面试前1小时" value="1" />
                  <el-option label="面试前2小时" value="2" />
                  <el-option label="面试前1天" value="24" />
                  <el-option label="面试前2天" value="48" />
                </el-select>
              </el-form-item>

              <el-form-item label="数据统计">
                <el-switch v-model="recruitmentForm.dataAnalytics" />
                <span class="form-tip">开启后，系统将收集招聘数据用于分析</span>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  OfficeBuilding,
  Phone,
  Picture,
  Link,
  UserFilled,
  Plus,
  Delete
} from '@element-plus/icons-vue'

// 响应式数据
const activeMenu = ref('basic')
const saveLoading = ref(false)
const basicFormRef = ref()
const contactFormRef = ref()
const brandingFormRef = ref()
const socialFormRef = ref()
const recruitmentFormRef = ref()

// 基本信息表单
const basicForm = reactive({
  name: '阿里巴巴集团',
  shortName: '阿里',
  industry: '互联网',
  size: '500+人',
  address: '浙江省杭州市余杭区',
  description: '阿里巴巴集团是一家以电子商务为核心的科技公司...',
  foundedDate: '1999-09-09'
})

// 联系方式表单
const contactForm = reactive({
  contactName: '张三',
  contactTitle: 'HR总监',
  contactEmail: 'zhangsan@alibaba.com',
  contactPhone: '13800138000',
  website: 'https://www.alibaba.com',
  servicePhone: '400-800-8888',
  serviceEmail: 'service@alibaba.com'
})

// 品牌形象表单
const brandingForm = reactive({
  logoUrl: '',
  coverUrl: '',
  primaryColor: '#ff6a00',
  secondaryColor: '#1890ff',
  slogan: '让天下没有难做的生意'
})

// 社交媒体表单
const socialForm = reactive({
  wechat: 'alibaba_official',
  weibo: 'https://weibo.com/alibaba',
  linkedin: 'https://linkedin.com/company/alibaba',
  github: 'https://github.com/alibaba',
  otherLinks: [
    { name: '知乎', url: 'https://zhihu.com/org/alibaba' }
  ]
})

// 招聘配置表单
const recruitmentForm = reactive({
  autoReply: true,
  replyTemplate: '感谢您投递简历，我们将在3个工作日内回复您。',
  resumeFilter: false,
  interviewReminder: true,
  reminderTime: '24',
  dataAnalytics: true
})

// 表单验证规则
const basicRules = {
  name: [
    { required: true, message: '请输入企业名称', trigger: 'blur' }
  ],
  industry: [
    { required: true, message: '请选择所属行业', trigger: 'change' }
  ],
  size: [
    { required: true, message: '请选择企业规模', trigger: 'change' }
  ]
}

const contactRules = {
  contactName: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' }
  ],
  contactEmail: [
    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' }
  ]
}

// 方法定义

/**
 * 菜单选择
 */
const handleMenuSelect = (index: string) => {
  activeMenu.value = index
}

/**
 * 保存基本信息
 */
const handleSaveBasic = async () => {
  try {
    await basicFormRef.value.validate()
    saveLoading.value = true

    // TODO: 调用API保存基本信息
    setTimeout(() => {
      saveLoading.value = false
      ElMessage.success('基本信息保存成功')
    }, 1000)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

/**
 * 保存联系方式
 */
const handleSaveContact = async () => {
  try {
    await contactFormRef.value.validate()
    saveLoading.value = true

    // TODO: 调用API保存联系方式
    setTimeout(() => {
      saveLoading.value = false
      ElMessage.success('联系方式保存成功')
    }, 1000)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

/**
 * 保存品牌形象
 */
const handleSaveBranding = () => {
  saveLoading.value = true

  // TODO: 调用API保存品牌形象
  setTimeout(() => {
    saveLoading.value = false
    ElMessage.success('品牌形象保存成功')
  }, 1000)
}

/**
 * 保存社交媒体
 */
const handleSaveSocial = () => {
  saveLoading.value = true

  // TODO: 调用API保存社交媒体
  setTimeout(() => {
    saveLoading.value = false
    ElMessage.success('社交媒体保存成功')
  }, 1000)
}

/**
 * 保存招聘配置
 */
const handleSaveRecruitment = () => {
  saveLoading.value = true

  // TODO: 调用API保存招聘配置
  setTimeout(() => {
    saveLoading.value = false
    ElMessage.success('招聘配置保存成功')
  }, 1000)
}

/**
 * Logo上传前验证
 */
const beforeLogoUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('Logo只能是 JPG/PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('Logo大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

/**
 * 处理Logo上传
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleLogoUpload = (options: any) => {
  // TODO: 实现Logo上传逻辑
  const reader = new FileReader()
  reader.onload = (e) => {
    brandingForm.logoUrl = e.target?.result as string
  }
  reader.readAsDataURL(options.file)
}

/**
 * 封面上传前验证
 */
const beforeCoverUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isJPG) {
    ElMessage.error('封面只能是 JPG/PNG 格式!')
  }
  if (!isLt5M) {
    ElMessage.error('封面大小不能超过 5MB!')
  }
  return isJPG && isLt5M
}

/**
 * 处理封面上传
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleCoverUpload = (options: any) => {
  // TODO: 实现封面上传逻辑
  const reader = new FileReader()
  reader.onload = (e) => {
    brandingForm.coverUrl = e.target?.result as string
  }
  reader.readAsDataURL(options.file)
}

/**
 * 添加社交链接
 */
const addSocialLink = () => {
  socialForm.otherLinks.push({ name: '', url: '' })
}

/**
 * 删除社交链接
 */
const removeSocialLink = (index: number) => {
  socialForm.otherLinks.splice(index, 1)
}

/**
 * 加载数据
 */
const loadData = () => {
  // TODO: 调用API获取企业设置数据
}

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.company-settings {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
}

.page-desc {
  color: #909399;
  margin: 0;
}

.settings-container {
  min-height: 600px;
}

.menu-card {
  position: sticky;
  top: 20px;
}

.settings-menu {
  border-right: none;
}

.content-card {
  min-height: 500px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.upload-section {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.logo-uploader:hover {
  border-color: #409eff;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
}

.logo {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: cover;
}

.cover-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.cover-uploader:hover {
  border-color: #409eff;
}

.cover-placeholder {
  width: 300px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c939d;
  font-size: 14px;
}

.cover {
  width: 300px;
  height: 100px;
  display: block;
  object-fit: cover;
}

.upload-tips {
  color: #909399;
  font-size: 12px;
  line-height: 1.5;
}

.upload-tips p {
  margin: 0 0 4px 0;
}

.color-section {
  display: flex;
  gap: 40px;
}

.color-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-item label {
  font-size: 14px;
  color: #303133;
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-item {
  display: flex;
  align-items: center;
}

.form-tip {
  margin-left: 12px;
  color: #909399;
  font-size: 12px;
}

@media (max-width: 768px) {
  .settings-container .el-col {
    margin-bottom: 20px;
  }

  .upload-section {
    flex-direction: column;
  }

  .color-section {
    flex-direction: column;
    gap: 20px;
  }
}
</style>
